<template>
    <div class="companyList">
        <div class="com_banner">
            <!--<img id="logoSrc" :src="logoSrc">-->
            <h1>{{mainPosition}}<span>{{mainName}}</span></h1>

        </div>
        <div class="container">
            <div class="row companyContent">
                <div class="leftCompany col-md-3">
                    <div class="leftTitle">
                        <h3 class="titleContent">关于亚盟</h3>
                    </div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class=" active">
                            <span class="tablesTitle ">{{COM_TYPE.COM_INTRO.value}}<p class="el-icon-caret-bottom"></p></span>
                            <a v-for="(item,index) in comIntroTitle" :key="index" href="#hengjiuIntro"
                               aria-controls="hengjiuIntro" role="tab" data-toggle="tab"
                               @click="hengjiuIn(item)">{{item}}</a>
                        </li>
                        <li class="collapsed" role="presentation">
                            <span class="tablesTitle">{{COM_TYPE.CHIEF_EXECUTIVE.value}}<p
                                    class="el-icon-caret-bottom"></p></span>
                            <a href="#chiefIntro" aria-controls="chiefIntro" role="tab" data-toggle="tab"
                               @click="chiefIn">董事长介绍</a>
                            <a href="#chiefMemberIntro" aria-controls="chiefMemberIntro" role="tab" data-toggle="tab"
                               @click="chiefMemberIn">集团股东</a>
                            <a href="#chiefManageIntro" aria-controls="chiefManageIntro" role="tab" data-toggle="tab"
                               @click="chiefManageIn">经营管理层</a>
                        </li>
                        <li class="collapsed " role="presentation">
                            <span class="tablesTitle">{{COM_TYPE.COM_GROUP.value}}<p
                                    class="el-icon-caret-bottom"></p></span>
                            <a href="#groupManagement" aria-controls="groupManagement" role="tab"
                               data-toggle="tab" @click="groupManagementIn">组织构架</a>
                        </li>
                        <li class="collapsed" role="presentation">
                            <span class="tablesTitle">{{COM_TYPE.DEVELOPMENT_HISTORY.value}}<p
                                    class="el-icon-caret-bottom"></p></span>
                            <a href="#comCulture" aria-controls="comCulture" role="tab" data-toggle="tab"
                               @click="comCultureIn">发展历程</a>
                            <a href="#comHonor" aria-controls="comHonor" role="tab" data-toggle="tab"
                               @click="comHonorIn">荣誉资质</a>
                        </li>
                    </ul>
                </div>
                <div class="rightCompany col-md-9">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="hengjiuIntro">
                            <div class="comListTitle">
                                <img :src="comIntroContentLogo">
                                <h3>{{comIntroContent.seoTitle}}</h3>
                                <!--<div class="product_title_line"></div>-->
                            </div>
                            <div v-html="comIntroContent.moduleContent">

                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane" id="chiefIntro">
                            <span class="paneTitle">{{comChiefCEO.name}}</span>
                            <div class="product_title_line"></div>
                            <div class="content" v-html="comChiefCEO.moduleContent">

                            </div>
                            <div class="chiefFooter">
                                <div class="signature">
                                    <span class="chiefFooterSpan">董事长：史仁怀</span>
                                    <img src="">
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="chiefMemberIntro">
                            <span class="paneTitle">{{COM_TYPE.STOCK_HOLDER.value}}<span
                                    class="glyphicon glyphicon-object-align-left"></span></span>
                            <div class="product_title_line"></div>
                            <div class="chiefMemberList row" v-for="(item,index) in comChiefStockHolder" :key="index">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="memberListLeft">
                                        <img :src="item.picList">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <div class="memberListMiddle">
                                    <span v-html="item.seoDescription">

                                    </span>
                                    </div>
                                    <div class="memberListRight">
                                        <div class="memberTop">占股
                                            <div class="com_title_line"></div>
                                        </div>
                                        <div class="memberBottom">{{item.stockHolderRate}}%</div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="chiefManageIntro">
                            <span class="paneTitle">{{COM_TYPE.MANAGEMENT_LAYER.value}}<span
                                    class="glyphicon glyphicon-object-align-left"></span></span>
                            <div class="product_title_line"></div>
                            <div class="chiefManageList" v-for="(item) in comChiefManager" :key="item.index">
                                <div class="manageListLeft">
                                    <img :src="item.picList">
                                </div>
                                <div class="manageListRight">
                                    <span>{{item.name}}</span>
                                    <div class="manageLine"></div>
                                    <div class="content">
                                        <span>
                                            {{item.seoDescription}}
                                        </span>
                                    </div>
                                </div>
                                <div class="bottomLine"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane" id="groupManagement">
                            <span class="paneTitle">{{comGroup.name}}<span class="glyphicon glyphicon-indent-left"></span></span>
                            <div class="product_title_line"></div>
                            <div class="content" v-html="comGroup.moduleContent">
                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane" id="comCulture">
                            <span class="paneTitle">{{COM_TYPE.DEVELOPMENT_HISTORY.value}}<span
                                    class="glyphicon glyphicon-object-align-left"></span></span>
                            <div class="product_title_line"></div>
                            <div class="content">
                                <div class="block">
                                    <el-timeline>
                                        <el-timeline-item v-for="(item,index) in comDevelop" :key="index" :timestamp="item.title" placement="top">
                                            <el-card>
                                                <h4>{{item.desc}}</h4>
                                            </el-card>
                                        </el-timeline-item>

                                    </el-timeline>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="comHonor">
                            <span class="paneTitle">{{COM_TYPE.HONOR_QUALIFICATION.value}}<span
                                    class="glyphicon glyphicon-object-align-left"></span></span>
                            <div class="product_title_line"></div>
                            <div class="content">
                                <el-row>
                                    <el-col :xs="12" :sm="12" :md="8" :lg="6" v-for="(item,index) in comHonor"
                                            :key="index">
                                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                                            <img class="cardImg img-responsive" :src="item.icon">
                                            <div style="padding: 14px;">
                                                <span>{{item.title}}</span>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>

                            </div>
                        </div>

                        <div class="moveListBox">
                            <div class="moveListTitle">
                                <div class="product_title_dot"></div>

                                <h3><span class="el-icon-s-flag"></span>精彩内容推送</h3>
                                <div class="product_title_line"></div>
                            </div>
                            <div class="moveList">
                                <ul>
                                    <li v-for="(item,index) in articleRecommend" :key="index">
                                        <a href="javascript:;" @click="inArticleDetail(item)">
                                            <img :src="item.picList" alt="" class="img-responsive">
                                            <span class="itemTitle">{{item.name}}</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

<script>

    export default {
        name: "companyList",
        data() {
            return {
                message: "公司介绍列表",
                comBan: '/base/imgs/company/2000_400BG-1-史总.jpg',
                logoSrc: '/base/imgs/company/亚盟logo.png',
                hengSrc: '/base/imgs/company/henglogo.png',
                shiSrc: '/base/imgs/company/shi-1.png',
                baiSrc: '/base/imgs/company/bai-2.png',
                picList: ['/base/imgs/company/com-1.jpg', '/base/imgs/company/com-2.jpg', '/base/imgs/company/com-3.jpg', '/base/imgs/company/com-1.jpg', '/base/imgs/company/com-2.jpg', '/base/imgs/company/com-3.jpg'],
                manageList: ['/base/imgs/company/shi-1.png', '/base/imgs/company/shi-1.png', '/base/imgs/company/shi-1.png', '/base/imgs/company/shi-1.png', '/base/imgs/company/shi-1.png', '/base/imgs/company/shi-1.png', '/base/imgs/company/shi-1.png'],
                honorList: ['/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png', '/base/imgs/company/2-com1.png'],
                COM_TYPE: COM_TYPE,
                //首图
                mainPic: [],
                mainPosition: '',
                mainName: '',
                //公司介绍
                comIntroList: [],
                comIntroTitle: [],
                comIntroContent: {},
                comIntroContentLogo: '',
                //董事介绍
                comChiefList: [],
                comChiefCEO: {},
                comChiefStockHolder: [],
                stockPics: [],
                comChiefManager: [],
                managerPics: [],
                //组织构架
                comGroup:{},
                //发展历程
                comDevelop:[],
                //荣誉资质
                comHonor:[],
                //文章推送
                articleRecommend:[],
            }
        },
        mounted() {

            this.getWidth();

            this.getComMainPic();
            this.getComIntro();
            this.getComChief();
            this.getArticleRecommend();
        },
        methods: {
            getComBanner() {
                let comBan = document.getElementsByClassName("com_banner")[0];
                comBan.style.backgroundImage = "url('" + this.comBan + "')";
            },
            getWidth() {
                //li的class=collapsed为折叠状态
                let lis = document.querySelectorAll(".companyList .companyContent .leftCompany .nav-tabs li");
                let liSpan = document.querySelectorAll(".companyList .companyContent .leftCompany .nav-tabs li span");
                //默认打开的li：lis[0]
                let openLi = liSpan[0].parentNode;
                for (let i = 0; i < liSpan.length; i++) {
                    liSpan[i].onclick = function () {
                        let spanParent = this.parentNode;
                        //切换之前，获取元素高度
                        let beginHeight = spanParent.offsetHeight;
                        //增加切换class工具类
                        Tool.toggleClass(spanParent, "collapsed");
                        let endHeight = spanParent.offsetHeight;
                        //执行高度动画，toogle之后高度立刻变化，需要先更改li高度[内联样式优先级>样式表样式collapsed]
                        //spanParent.style.height=beginHeight+"px";
                        if (!spanParent.style.display) {
                            spanParent.style.display = "block";
                        }

                        //如果相等则不添加class，存在class，则不执行切换
                        if (spanParent !== openLi && !Tool.hasClass(openLi, "collapsed")) {
                            //关闭之前打开的菜单，不需要动画可以使用addClass
                            //Tool.addClass(openLi,"collapsed");
                            Tool.toggleClass(openLi, "collapsed");
                        }
                        //修改当前的openLi
                        openLi = spanParent;
                    }
                }

                let logoSrc = document.getElementById("logoSrc");
                let banner = document.querySelectorAll(".companyList .com_banner h1")[0];
                let comSpanClass = document.querySelectorAll(".rightCompany .tab-content .tab-pane .chiefMemberList .memberListMiddle");
                let comSpanRight = document.querySelectorAll(".rightCompany .tab-content .tab-pane .chiefMemberList .memberListRight");
                let comSpan = document.querySelectorAll(".rightCompany .tab-content .tab-pane .chiefMemberList .memberListMiddle span");
                let manageImg = document.querySelectorAll(".rightCompany .tab-content .tab-pane .chiefManageList .manageListLeft img");
                let manageContent = document.querySelectorAll(".rightCompany .tab-content .tab-pane .chiefManageList .manageListRight .content span");
                $(window).on("resize", function () {
                    let wid = $(window).width();
                    if (wid >= 1500) {
                        console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
                        /*logoSrc.style.left = "37%";*/
                    } else if (wid >= 1200 && wid < 1500) {
                        /*logoSrc.style.left = "34%";*/
                        console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持")
                    } else if (wid > 992 && wid < 1200) {
                        for (let i = 0; i < comSpan.length; i++) {
                            comSpan[i].style = "width:350px;";
                        }
                        for (let j = 0; j < manageImg.length; j++) {
                            manageImg[j].style = "width:50px;height50px";
                            manageContent[j].style.fontSize = "14px";
                        }
                    } else if (wid <= 992 && wid > 768) {
                        for (let i = 0; i < comSpan.length; i++) {
                            comSpan[i].style = "width:390px;";
                        }
                        for (let j = 0; j < manageImg.length; j++) {
                            manageImg[j].style = "width:100px";
                            manageContent[j].style.fontSize = "14px";
                        }
                    } else {
                        for (let i = 0; i < comSpan.length; i++) {
                            comSpan[i].style = "width:330px;";
                            comSpanRight[i].style.marginLeft = "5px";
                            comSpanRight[i].style.width = "175px";
                            comSpanClass[i].style.marginLeft = "0";
                        }
                        for (let j = 0; j < manageImg.length; j++) {
                            manageImg[j].style = "width:100px";
                            manageContent[j].style.fontSize = "14px";
                            manageContent[j].style.width = "230px";
                        }
                        banner.style.marginLeft = "0";
                    }
                }).trigger("resize");
            },
            //滚动推荐
            moveList() {
                let moveList = document.getElementsByClassName("moveList")[0];
                //必须开启ul的absolute
                let moveUL = moveList.children[0];
                let moveLeft = 0;//移动左控制
                let timer = null;//定时器
                timer = setInterval(moveRecommend, 10);

                function moveRecommend() {
                    moveLeft--;
                    //每个图片250，加左边看10
                    moveLeft <= -750 ? moveLeft = 0 : moveLeft;
                    moveUL.style.left = moveLeft + "px";
                }

                //鼠标移入清空定时器
                moveList.onmouseover = function () {
                    clearInterval(timer);
                }
                moveList.onmouseout = function () {
                    timer = setInterval(moveRecommend, 10);
                }
            },

            //列表跳转
            hengjiuIn(item) {
                for (let i = 0; i < this.comIntroList.length; i++) {
                    if (item === this.comIntroList[i].name) {
                        this.comIntroContent = this.comIntroList[i];
                        this.comIntroContentLogo = this.comIntroList[i].picList[0];
                    }
                }

                let hengjiu = document.getElementById("hengjiuIntro");
                this.removeNavClass();
                this.removeMove("block");
                if (!Tool.hasClass(hengjiu, "active")) {
                    Tool.addClass(hengjiu, "active");
                }
            },
            chiefIn() {
                let chief = document.getElementById("chiefIntro");
                this.removeNavClass();
                this.removeMove("none");
                if (!Tool.hasClass(chief, "active")) {
                    Tool.addClass(chief, "active");
                }

                for (let i = 0; i < this.comChiefList.length; i++) {
                    if (this.comChiefList[i].comType === COM_TYPE.CHIEF_EXECUTIVE.key) {
                        this.comChiefCEO = this.comChiefList[i];
                    }
                }
            },

            chiefMemberIn() {

                let chiefMember = document.getElementById("chiefMemberIntro");
                this.removeMove("none");
                this.removeNavClass();
                if (!Tool.hasClass(chiefMember, "active")) {
                    Tool.addClass(chiefMember, "active");
                }
            },
            chiefManageIn() {

                let chiefManage = document.getElementById("chiefManageIntro");
                this.removeMove("none");
                this.removeNavClass();
                if (!Tool.hasClass(chiefManage, "active")) {
                    Tool.addClass(chiefManage, "active");
                }
            },
            groupManagementIn() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/com/group/list').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 100);
                    let resp = response.data;
                    if (resp.success) {
                        this.comGroup = resp.responseData[0];
                    }
                })
                let groupManagement = document.getElementById("groupManagement");
                this.removeMove("none");
                this.removeNavClass();
                if (!Tool.hasClass(groupManagement, "active")) {
                    Tool.addClass(groupManagement, "active");
                }
            },
            comCultureIn() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/com/devhornor/list').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 100);
                    let resp = response.data;
                    if (resp.success) {
                        this.comDevelop = resp.responseData[0].coreDescDtos;
                    }
                })
                let comCulture = document.getElementById("comCulture");
                this.removeMove("none");
                this.removeNavClass();
                if (!Tool.hasClass(comCulture, "active")) {
                    Tool.addClass(comCulture, "active");
                }
            },
            comHonorIn() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/com/hornor/list').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 100);
                    let resp = response.data;
                    if (resp.success) {
                        this.comHonor = resp.responseData[0].coreDescDtos;
                    }
                })
                let comHonor = document.getElementById("comHonor");
                this.removeMove("none");
                this.removeNavClass();
                if (!Tool.hasClass(comHonor, "active")) {
                    Tool.addClass(comHonor, "active");
                }
            },
            removeNavClass() {
                let navLink = document.querySelectorAll(".rightCompany .tab-content .tab-pane");
                for (let i = 0; i < navLink.length; i++) {
                    Tool.removeClass(navLink[i], "active");
                }
            },
            //去除推荐轮播图
            removeMove(dis) {
                let moveList = document.getElementsByClassName("moveListBox")[0];
                moveList.style.display = dis;
            },
            getComMainPic() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/com/mainPic').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.mainPic = resp.responseData;
                        this.comBan = this.mainPic[0].picList[0];
                        let seokey = this.mainPic[0].seoKeyword;
                        this.mainPosition = seokey[0];
                        this.mainName = seokey[1];
                        //banner
                        this.getComBanner();
                    }
                });
            },
            getComIntro() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/com/list').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.comIntroList = resp.responseData;
                        for (let i = 0; i < this.comIntroList.length; i++) {
                            this.comIntroTitle.push(this.comIntroList[i].name);
                            this.comIntroContent = this.comIntroList[0];
                            this.comIntroContentLogo = this.comIntroList[0].picList[0];
                        }
                    }
                });
            },
            getComChief() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/com/chief/list').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.comChiefList = resp.responseData;
                        for (let i = 0; i < this.comChiefList.length; i++) {
                            if (this.comChiefList[i].comType === COM_TYPE.STOCK_HOLDER.key) {
                                this.comChiefStockHolder.push(this.comChiefList[i]);
                            }
                        }
                        for (let i = 0; i < this.comChiefList.length; i++) {
                            if (this.comChiefList[i].comType === COM_TYPE.MANAGEMENT_LAYER.key) {
                                this.comChiefManager.push(this.comChiefList[i]);
                            }
                        }
                    }
                });
            },
            getArticleRecommend(){
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/article/index/list').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.articleRecommend = resp.responseData;
                        //滚动推荐
                        this.moveList();
                    }
                });
            },
            //进入新闻详情
            inArticleDetail(item){
                SessionStorage.set(ARTICLE,item);
                this.$router.push({
                    path:"/news/detail",
                    params:{item}
                })
            }
        }
    }
</script>

<style scoped>
    /*banner*/
    .companyList .com_banner {
        background-position: center;
        width: 100%;
        height: 410px;
        /*避免图片尺寸不一样，进行填充屏幕*/
        background-size: cover;
        position: relative;
    }

    .companyList .com_banner img {
        width: 60px;
        float: left;
        position: absolute;
        margin-left: -10%;
        top: 8%;
    }

    .companyList .com_banner h1 {
        display: inline-block;
        padding: 0 10px 20px;
        margin-top: 0;
        margin-left: 31%;
        color: #ffffff;
        line-height: 110px;
        background-color: rgba(233, 35, 34, .5);
        position: relative;
    }

    .companyList .com_banner h1 span {
        position: absolute;
        font-size: 28px;
        width: 100%;
        height: 70%;
        color: #ffffff;
        margin-left: -190px;
        margin-top: 80px;
        line-height: 55px;
        text-align: center;
    }

    /*左列表*/
    .companyList .companyContent .leftCompany {
        margin: 20px auto;
        position: relative;
    }

    .companyList .companyContent .leftCompany .leftTitle {
        border-top-left-radius: 10px;
        width: 95%;
        text-align: center;
        background: linear-gradient(#e92322, #fc4140);
        position: relative;
    }

    .companyList .companyContent .leftCompany .leftTitle::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: #ffffff;
        left: 20px;
        top: -10px;
    }

    /*.companyList .companyContent .leftCompany .leftTitle::after{
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        background: #d52323;
    }*/
    .companyList .companyContent .leftCompany .leftTitle h3 {
        margin: 0;
        line-height: 70px;
        color: #ffffff;
        position: relative;
    }

    .companyList .companyContent .leftCompany .leftTitle h3::after {
        content: "";
        position: absolute;
        width: 100%;
        border-bottom: 2px solid #ffffff;
        left: 0;
        bottom: 10px;
    }

    .companyList .companyContent .leftCompany .nav-tabs {
        margin-top: 10px;
        border-bottom: 0;

    }

    .companyList .companyContent .leftCompany .nav-tabs li {
        margin-bottom: 10px;
        border-bottom: none;
        width: 95%;
        display: inline-block;
        position: relative;
        transition: 1s;
    }

    .companyList .companyContent .leftCompany .nav-tabs li span {
        display: inline-block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        /*width: 265px;*/
        text-align: center;
        border-top-right-radius: 10px;
        font-size: 18px;
        font-weight: bolder;
        background-color: #e92322;
        color: #ffffff;
        /*默认margin-right：2px*/
        cursor: pointer;
        transition: 1s;
    }

    .companyList .companyContent .leftCompany .nav-tabs li span:hover,
    .companyList .companyContent .leftCompany .nav-tabs li span:focus {
        background-color: #f84645;
    }

    .companyList .companyContent .leftCompany .nav-tabs li span p {
        line-height: 50px;
        margin-left: 30px;
        font-size: 24px;
    }

    .companyList .companyContent .leftCompany .nav-tabs li a {
        margin: 5px auto;
        background: #e92322;
        color: white;
        width: 100%;
        float: right;
        text-align: center;
        font-size: 16px;
        border-radius: 5px;
        border: none;
        transition: .5s;
    }

    .companyList .companyContent .leftCompany .nav-tabs li a::before {
        position: absolute;
        content: "";
        height: 100%;
        border-left: 10px solid #ffffff;
        top: 0;
        left: 10px;
    }

    .companyList .companyContent .leftCompany .nav-tabs li a:hover,
    .companyList .companyContent .leftCompany .nav-tabs li a:focus,
    .companyList .companyContent .leftCompany .nav-tabs li.active a {
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        cursor: pointer;
        border-left: 20px solid #ffffff;
        background: #ff2c2b;
    }

    .companyList .companyContent .leftCompany .nav-tabs li.active a::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #ffffff;
        text-align: center;
        margin-left: 15px;
        margin-top: 5px;
        border-radius: 5px;
    }

    /*折叠class*/
    .companyList .companyContent .leftCompany .nav-tabs li.collapsed a {
        display: none;
        transition: 2s;
    }

    /*右列表*/
    .companyList .companyContent .rightCompany {
        margin-left: -2%;

    }

    /*头部标题*/
    .companyList .companyContent .rightCompany .tab-content .tab-pane .comListTitle {
        position: relative;
        height: 70px;
        width: 100%;
        color: #ffffff;
        background-color: #ff2c2b;
        border-top-right-radius: 10px;
    }

    .companyList .companyContent .rightCompany .tab-content .tab-pane .comListTitle::after {
        content: "";
        position: absolute;
        width: 100%;
        border-bottom: 2px solid #ffffff;
        left: 0;
        bottom: 10px;
    }

    .companyList .companyContent .rightCompany .tab-content .tab-pane .comListTitle img {
        width: 40px;
        margin-top: 12px;
        left: 1%;
        float: left;
        margin-left: 2%;
        margin-right: 2%;
    }

    .companyList .companyContent .rightCompany .tab-content .tab-pane .comListTitle h3 {
        line-height: 70px;
        margin-bottom: 0;
    }

    /*富文本内容*/
    .companyList .companyContent .rightCompany .tab-content .tab-pane .content {
        margin-top: 20px;
    }

    .product_title_line {
        display: inline-block;
        width: 100%;
        height: 2px;
        color: #777;
        border-top: 2px solid #ccc;
    }

    .product_title_dot {
        margin-top: 20px;
        display: inline-block;
        width: 100%;
        height: 2px;
        color: #777;
        border-top: 2px dashed #ccc;
    }

    /*底部标题*/

    .companyList .companyContent .rightCompany .tab-content .moveListTitle h3 {
        color: #ff2c2b;
        margin-bottom: 0;
        position: relative;

    }

    .companyList .companyContent .rightCompany .tab-content .moveListTitle h3::after {
        position: absolute;
        content: "1";
        width: 15px;
        height: 15px;
        background-color: #ff2c2b;
        transform: rotateZ(120deg);
        right: 10px;
        bottom: 0;
    }

    /*底部推荐*/
    .companyList .companyContent .rightCompany .tab-content .moveList {
        margin-top: 20px;
        margin-bottom: 20px;
        max-width: 845px;
        height: 150px;
        overflow: hidden;
        border: 1px solid #ccc;
        padding-top: 10px;
        position: relative;
    }

    .companyList .companyContent .rightCompany .tab-content .moveList ul {
        /*移动必须开启absolute*/
        position: absolute;
        display: inline-block;
        text-decoration: none;
        list-style: none;
        height: 150px;
        /*overflow: hidden;*/
        /*指定width=200%，需要高于当前图片数量的宽度*/
        width: 400%;
    }

    .companyList .companyContent .rightCompany .tab-content .moveList ul li {
        float: left;

    }

    .companyList .companyContent .rightCompany .tab-content .moveList ul li a {
        display: inline-block;
        position: relative;
    }

    .companyList .companyContent .rightCompany .tab-content .moveList ul li a::after {
        position: absolute;
        content: "";
        height: 150px;
        width: 10px;
        top: 0;
        left: -10px;
        border-right: 10px solid #ffffff;
    }

    .companyList .companyContent .rightCompany .tab-content .moveList ul li a img {
        width: 250px;
        /*取消内部上下间隔3px*/
        vertical-align: top;
        position: relative;
    }

    .companyList .companyContent .rightCompany .tab-content .moveList ul li a span {
        position: absolute;
        color: white;
        font-size: 16px;
        padding: 5px 0;
        width: 250px;
        background-color: rgba(40, 40, 40, .5);
        text-align: center;
        left: 0;
        bottom: 0;
    }

    /*董事长致辞*/
    .rightCompany .tab-content .tab-pane {
        margin-top: 20px;
    }

    .rightCompany .tab-content .tab-pane .paneTitle {
        display: inline-block;
        margin-top: 10px;
        font-size: 24px;
        font-weight: bolder;
    }

    .companyList .companyContent .rightCompany .tab-content .tab-pane .content {
        font-size: 16px;
    }

    .rightCompany .tab-content .tab-pane .paneTitle .glyphicon {
        margin-left: 10px;
        top: 5px;
        color: #d40d0c;
    }

    .rightCompany .tab-content .tab-pane .chiefFooter {
        float: right;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .rightCompany .tab-content .tab-pane .chiefFooter .signature {

    }

    .rightCompany .tab-content .tab-pane .chiefFooter .signature .chiefFooterSpan {
        font-size: 18px;
        font-weight: bolder;
    }

    /*集团股东*/
    .rightCompany .tab-content .tab-pane .chiefMemberList {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 5px;
        border: 1px solid #eeeeee;
        padding: 10px 0;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListLeft {
        position: relative;
        width: 150px;
        background: #b62024;
        float: left;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListLeft img {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        width: 150px;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListLeft span {
        position: absolute;
        font-size: 18px;
        width: 150px;
        background: rgba(0, 0, 7, .5);
        text-align: center;
        color: white;
        left: 0;
        bottom: 0;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListMiddle {
        border: 1px dashed #b62024;
        margin-left: 10px;
        margin-right: 10px;
        float: left;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListMiddle span {

        max-width: 500px;
        height: 205px;
        font-size: 16px;
        padding: 10px;
        /*文字省略：多行*/
        line-height: 24px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListRight {
        width: 150px;
        height: 209px;
        display: inline-block;
        background: #b62024;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListRight .memberTop {
        text-align: center;
        font-size: 24px;
        color: #ffffff;
        margin-top: 20px;
    }

    .rightCompany .tab-content .tab-pane .chiefMemberList .memberListRight .memberBottom {
        text-align: center;
        font-size: 36px;
        font-weight: bolder;
        color: #ffffff;
        margin-top: 30px;
    }

    .com_title_line {
        display: inline-block;
        width: 100%;
        height: 2px;
        color: #777;
        border-top: 2px solid #ffffff;
    }

    /*公司管理层*/
    .rightCompany .tab-content .tab-pane .chiefManageList {
        position: relative;
    }

    .rightCompany .tab-content .tab-pane .chiefManageList .bottomLine {

        border-bottom: 1px dotted #ccc;
        padding: 10px;
        margin: 10px;
        width: 100%;
        float: left;
    }

    .rightCompany .tab-content .tab-pane .chiefManageList .manageListLeft img {
        background: #eeeeee;
        border: 1px solid #cccccc;
        width: 150px;
        height: 220px;
        padding: 5px;
        float: left;
        margin-top: 20px;
    }

    .rightCompany .tab-content .tab-pane .chiefManageList .manageListRight {
        position: relative;
    }

    .rightCompany .tab-content .tab-pane .chiefManageList .manageListRight span {
        display: inline-block;
        margin-left: 20px;
        margin-top: 20px;
        font-size: 20px;
    }

    /*.rightCompany .tab-content .tab-pane .chiefManageList .manageListRight .manageLine{
        position: absolute;
        border-bottom: 2px solid #eee;
        width: 80%;
        display: block;
        left: 20%;
        top: 60px;

    }*/
    .rightCompany .tab-content .tab-pane .chiefManageList .manageListRight .content {

    }

    .rightCompany .tab-content .tab-pane .chiefManageList .manageListRight .content span {
        margin-top: 0;
        font-size: 16px;
        width: 78%;
        height: 150px;
    }

    /*发展历程*/
    /deep/ .el-timeline-item__tail {
        left: 8px;
        border-color: #b62024;
    }

    /deep/ .el-timeline-item__node--normal {
        width: 20px;
        height: 20px;

    }

    /deep/ .el-timeline-item__node {
        background-color: #b62024;
    }

    /deep/ .el-timeline-item__timestamp {
        color: #a8a2a2;
        font-size: 20px;
    }

    /*荣誉资质*/
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .rightCompany .tab-content .tab-pane .content .el-card {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .rightCompany .tab-content .tab-pane .content .cardImg {

    }
</style>